课堂中讲解的示例

<script type="text/javascript">
    document.querySelector("button").onclick = function(){
        getPhoneData();
    }
        // var xhr = new XMLHttpRequest();
        // xhr.onreadystatechange = function(){
        //     if(xhr.readyState === 4){
        //         if(xhr.status === 200 || xhr.status === 304){
        //             console.log(xhr.responseText);
        //         }
        //     }
        // }
        // //   ./ 当前目录    ../上级目录   /代表根目录
        // xhr.open("get","http://localhost/lesson/1706/Ajax/data.json",true);
        // xhr.send(null);

        //XMLHttpRequest 对象 是 AJAX 的核心
        //不兼容的 IE4.0 5.0 6.0 7.0用的都不同
        // [
        //     "MSXML2.XMLHttp.6.0",
        // "MSXML2.XMLHttp.30",
        // "MSXML2.XMLHttp",
        // "Microsoft.XMLHTTP"];
        //ActiveXObject();
        function getPhoneData(){
            //兼容性处理
            var xhr = null;
            if(window.XMLHttpRequest){
                //主流浏览器
                xhr = new XMLHttpRequest();
            }else{
                //IE 浏览器
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            };
            //监听状态变化事件 readystatechange  每当有状态变化时，触发 最多五次
            xhr.onreadystatechange = function(){
                console.log("变化");
                //每一个状态都有一个状态码 readyState
                // 0  未初始化  尚未调用 open()方法
                // 1  启动    调用 open()方法  尚未调用 send()方法
                // 2  发送  已经调用 send()方法，但尚未接收到响应数据
                // 3 接收  服务器已经返回部分可用数据
                // 4 接收完成   所有数据可用
                // 并不是所有浏览器都按照从0到4依次触发，所以程序员只需关注4即可
                console.log(xhr.readyState)
                // responseText
                if(xhr.readyState === 4){//代表数据已经全部响应完毕，可安全使用
                    //xhr.status  http 状态码
                    // 200 请求成功
                    // 304  请求缓存数据成功
                    // 404  代表地址未找到
                    // 403  没有访问权限（访问被拒绝）
                    // 500 或以上 服务器内部错误
                    console.log(xhr.status);
                    var div = document.querySelector("#list");
                    if(xhr.status===200){
                        div.innerHTML = "";
                        // console.log(xhr.responseText)
                        var result = JSON.parse(xhr.responseText);
                        for(var i=0;i<result.length;i++){
                            var phone = result[i];
                            var h1 = document.createElement("h1");
                            var h2 = document.createElement("h2");
                            h1.innerHTML = phone.name;
                            h2.innerHTML = "价格:"+phone.price+"--颜色:"+phone.color;
                            div.appendChild(h1);
                            div.appendChild(h2);
                        }
                    }
                }
            }
            //xhr.open(method,url,isAsync)  启动一个请求 待发送
            //并不像字面理解打开请求
            //GET 请求是将请求参数拼接到 URL 的后面，通过 ?a=b&c=d&....
            // GET 请求一般用于数据获取请求，能传递的参数量较小，且为明文
            // POST请求将请求参数置于请求体中，能够传输大量的参数数据
            xhr.open("get","./data.json",true);

            // xhr.open("get","./index.php?user=xfdsafsda&age=55",true);
            // xhr.open("post","./index.php",true);

            //xhr.send(param)  发送请求  参数代表要发往服务器的数据
            //setRequestHeader(name,val) 设置请求头
            //如果要发送 POST 请求数据，需要先设置请求头，以表单形式发送数据
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            //send 中填写要发送的数据  a=b&c=d&...
            // xhr.send("user=zhar&age=30");
            xhr.send(null);
        }

</script>